import { Box } from "@mui/system";
import React from "react";
import "./MyCard.css";
import { useEffect } from "react";
import Face4Icon from "@mui/icons-material/Face4";
import BookmarkAddedIcon from "@mui/icons-material/BookmarkAdded";
import MoodIcon from "@mui/icons-material/Mood";
import SixtyFpsIcon from "@mui/icons-material/SixtyFps";
import LooksOneIcon from "@mui/icons-material/LooksOne";
import {
  Avatar,
  Button,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Divider,
  List,
  ListItem,
  ListItemAvatar,
  ListItemText,
  Typography,
} from "@mui/material";
import { useState } from "react";
export default function MyCard(props) {
  const [open, setOpen] = useState(false);
  const [preScore, setPreScore] = useState(0);

  const handleClose = () => {
    setOpen(false);
  };
  const handleOpen = () => {
    setOpen(true);
  };

  useEffect(() => {
    setTimeout(() => {
      setPreScore(props.score);
    }, props.delay);
  });

  return (
    <>
      <Box
        className="bodyBox"
        sx={{ background: props.color, minWidth: 130, opacity: 0.8 }}
        onClick={handleOpen}
      >
        <div className="score" id={props.id}>
          <CircularProgress
            size={50}
            thickness={4.3}
            variant="determinate"
            value={preScore}
          />
        </div>

        <Typography>{props.name}</Typography>
        <Typography className="innerTitle">{props.score}分</Typography>
      </Box>

      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{props.name}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            <List>
              <ListItem>
                <ListItemAvatar>
                  <Avatar
                    sx={{
                      opacity: 0.6,
                      color: "common.white",
                      bgcolor: "primary.main",
                    }}
                  >
                    <BookmarkAddedIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  sx={{ minWidth: 300 }}
                  primary={"学分: " + props.weight}
                  // secondary={props.teacher}
                />
              </ListItem>
              <Divider />
              <ListItem>
                <ListItemAvatar>
                  <Avatar
                    sx={{
                      opacity: 0.6,
                      color: "common.white",
                      bgcolor: "primary.main",
                    }}
                  >
                    <Face4Icon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  sx={{ minWidth: 300 }}
                  primary={"平时成绩: " + props.usualscore}
                  // secondary={props.teacher}
                />
              </ListItem>
              <Divider />

              <ListItem>
                <ListItemAvatar>
                  <Avatar
                    sx={{
                      opacity: 0.6,
                      color: "common.white",
                      bgcolor: "primary.main",
                    }}
                  >
                    <MoodIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  sx={{ minWidth: 300 }}
                  primary={"考试成绩: " + props.examscore}
                  // secondary={props.teacher}
                />
              </ListItem>
              <Divider />
              <ListItem>
                <ListItemAvatar>
                  <Avatar
                    sx={{
                      opacity: 0.6,
                      color: "common.white",
                      bgcolor: "primary.main",
                    }}
                  >
                    <SixtyFpsIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  sx={{ minWidth: 300 }}
                  primary={"总成绩: " + props.score + "分"}
                  // secondary={props.teacher}
                />
              </ListItem>

              <Divider />
              <ListItem>
                <ListItemAvatar>
                  <Avatar
                    sx={{
                      opacity: 0.6,
                      color: "common.white",
                      bgcolor: "primary.main",
                    }}
                  >
                    <LooksOneIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  sx={{ minWidth: 300 }}
                  primary={"排名: " + props.rank}
                  // secondary={props.teacher}
                />
              </ListItem>
            </List>
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button variant="outlined" onClick={handleClose}>
            知道了
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}
